<template>
    <div id='login'>
      <div class="login-wrap">
        <ul class="menu-tab">
          <li v-for="item in menuTab" :key="item.id" :class="{'current': item.current}" @click="toggleMenu(item)">
            {{ item.txt }}
          </li>
        </ul>
        <!-- 表单 -->
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm"   class="login-form" size="medium">
            <el-form-item prop="username">
              <label for="username">邮箱</label>
                <el-input type="text" v-model="ruleForm.username" autocomplete="off" id='username'>
                </el-input>
              </el-form-item>
  
            <el-form-item prop="password">
                <label for="password">密码</label>
               <el-input id="password" type="password" v-model="ruleForm.password" autocomplete="off" minlength="6" maxlength="20"></el-input>
            </el-form-item>
            <el-form-item prop="passwords" v-if='mode==="register"'>
                <label for="passwords">确认密码</label>
              <el-input type="password" v-model="ruleForm.passwords" autocomplete="off" id='passwords'  minlength="6" maxlength="20"></el-input>
            </el-form-item>
            <el-form-item prop="code">
                <label for="code">验证码</label>
              <el-col :span="15" style='padding-right: 15px;'>
                  <el-input v-model="ruleForm.code" minlength="6" maxlength="6" autocomplete="off" >
                  </el-input>
              </el-col>
              <el-col :span="9">
                  <el-button type="success" class="block" >验证码</el-button>
                </el-col>
            </el-form-item>
          
              <el-button type="danger" @click="submitForm('ruleForm')" class="login-btn block">
                {{mode==='login' ? '登录' : '注册'}}
              </el-button>
            </el-form-item>
          </el-form>
      </div>
    </div>
  </template>
  
  <script>
    import {stripscript,validateEmail,validatePass,validateCode} from 'utils/validate'
    export default {
      name: 'login',
      data() {
        // 邮箱
        var validateUsername = (rule, value, callback) => {
          if (!value) {
            return callback(new Error('请输入邮箱'));
          }else{
            if(!this.ruleForm.username!==''){
              !validateEmail(this.ruleForm.username)&&callback(new Error('请输入正确邮箱！！'));
            }
          }
        };
        // 密码
        var validatePassword = (rule, value, callback) => {
          this.ruleForm.password = value =stripscript(value)//过滤特殊字符
          if (value === '') {
            callback(new Error('请输入密码'));
          } else {
            if (this.ruleForm.password !== '') {
              // 其它验证
              !validatePass(this.ruleForm.password)&&callback(new Error('请输入6-20位的密码！！'));
            }
            callback();
          }
        };
        var validatePassword2 = (rule, value, callback) => {
          this.ruleForm.password2 = value =stripscript(value)//过滤特殊字符
          if (value === '') {
            callback(new Error('请再次输入密码'));
          } else if (value !== this.ruleForm.password) {
            callback(new Error('两次输入密码不一致!'));
          } else {
            callback();
          }
        };
        // 验证码
        var validateCode = (rule, value, callback) => {
          this.ruleForm.code = value =stripscript(value)//过滤特殊字符
          let reg = /^[a-z0-9]{6}$/
          if (value === '') {
            callback(new Error('请输入验证码'));
          } else {
            if (this.ruleForm.code !== '') {
              !validateCode(this.ruleForm.code)&&callback(new Error('请输入正确验证码！！'));
            }
            callback();
          }
        };
        return {
          menuTab: [
            {
              txt: '登录',
              current: true,
              type: 'login'
            },
            {
              txt: '注册',
              current: false,
              type: 'register'
            }
          ],
          mode:'login',
          ruleForm: {
            username: '',
            password: '',
            passwords: '',
            code:''
          },
          rules: {
            username: [
              { validator: validateUsername, trigger: 'blur' }
            ],
            password: [
              { validator: validatePassword, trigger: 'blur' }
            ],
            passwords: [
              { validator: validatePassword2, trigger: 'blur' }
            ],
            code: [
              { validator: validateCode, trigger: 'blur' }
            ]
          }
        }
      },
      methods: {
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              alert('submit!');
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        toggleMenu(item){
          this.menuTab.forEach((elem, index) => {
            elem.current = false;
          });
          // 高光
          item.current = true;
          // 修改模块值
          this.mode = item.type
        }
      }
    };
  </script>
  <style lang='scss' scoped>
    #login {
      position: relative;
      height: 100vh;
      background-color: #344a5f;
    }
  
    .login-wrap {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      width: 330px;
    }
  
    .menu-tab {
      text-align: center;
  
      li {
        display: inline-block;
        width: 88px;
        line-height: 36px;
        font-size: 14px;
        color: #fff;
        border-radius: 2px;
        cursor: pointer;
      }
  
      .current {
        background-color: rgba(0, 0, 0, .1);
      }
    }
  
    .login-form {
      margin-top: 29px;
  
      label {
        display: block;
        margin-bottom: 3px;
        font-size: 14px;
        color: #fff;
      }
  
      .item-from {
        margin-bottom: 13px;
      }
  
      .block {
        display: block;
        width: 100%;
      }
  
      .login-btn {
        margin-top: 19px;
      }
    }
  </style>